<template>
  <div>
    <div class="topTitle">请选择需要机器人管理的微信群（还可添加100个）:</div>
    <div class="searchLine">
      <el-input v-model="groupSearch"></el-input>
      <el-button type="primary" style="margin-left:20px;">搜索</el-button>
    </div>
    <div class="listBox">
      <div
        v-for="(item, index) in groupList"
        :key="index"
        class="listBox__line"
      >
        <div>{{ item.name }}</div>
        <el-checkbox v-model="item.isCheck"></el-checkbox>
      </div>
    </div>
    <div class="bottomDeal">
      <el-checkbox v-model="checkAll" style="margin-top: 20px;"
        >全选</el-checkbox
      >
      <PageManage
        :pageSize="pageSize"
        :pageNum="pageNum"
        :total="total"
        @handleSizeChange="handleSizeChange"
        @handleCurrentChange="handleCurrentChange"
      ></PageManage>
    </div>
  </div>
</template>

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";
import PageManage from "@/components/PageManage.vue";

@Component({
  components: {
    PageManage,
  },
})
export default class AddGroup extends Vue {
  /** 搜索的微信群名称 */
  groupSearch = "";

  /** 全选框 */
  checkAll = false;

  pageSize = 10;

  pageNum = 1;

  total = 0;

  groupList = [
    {
      name: "微信群群名称1",
      isCheck: false,
    },
    {
      name: "微信群群名称1",
      isCheck: false,
    },
    {
      name: "微信群群名称1",
      isCheck: false,
    },
    {
      name: "微信群群名称1",
      isCheck: false,
    },
    {
      name: "微信群群名称1",
      isCheck: false,
    },
    {
      name: "微信群群名称1",
      isCheck: false,
    },
    {
      name: "微信群群名称1",
      isCheck: false,
    },
    {
      name: "微信群群名称1",
      isCheck: false,
    },
    {
      name: "微信群群名称1",
      isCheck: false,
    },
    {
      name: "微信群群名称1",
      isCheck: false,
    },
  ];
}
</script>

<style lang="scss" scoped>
.topTitle {
  margin-bottom: 20px;
  font-size: 14px;
}

.searchLine {
  display: flex;
  justify-content: space-between;
}

.listBox {
  margin: 10px 0px;

  &__line {
    display: flex;
    justify-content: space-between;
    margin: 5px 0px;
  }
}

.bottomDeal {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>
